/**
 * 一个通用的下拉选择框功能
 * @param {Object} config - 配置对象，包含选择框的各项配置
 */
function createDropdown(config) {
    const { 
        selectElement, 
        selectedElement, 
        selectedTextElement, 
        optionsContainer, 
        optionsElements, 
        arrowElement, 
        closestItem,
        defaultText,
        radioElements = document.querySelector('.radio-container'),
        dNElements = document.querySelector('.department-number-select'),
    } = config;

    let curSelection = null;
    let isArrowRotated = false;

    // 切换下拉框显示状态并更新箭头
    const toggleDropdown = (isOpen) => {
        optionsContainer.style.display = isOpen ? 'block' : 'none';
        selectedElement.classList.toggle('blur', isOpen);
        arrowElement.style.transform = isOpen ? 'rotate(180deg)' : 'rotate(0deg)';
    };

    // 点击选择框时切换下拉框显示状态
    selectedElement.addEventListener('click', () => {
      
        const isOpen = optionsContainer.style.display === 'block';
        toggleDropdown(!isOpen); // 反转当前状态
    });

    optionsContainer.addEventListener('mouseenter', () => {
        if(curSelection) {
            curSelection.classList.remove('not-hover')
        }
    })

    optionsContainer.addEventListener('mouseleave', () => {
        if(curSelection) {
            curSelection.classList.add('not-hover')
        }
    })

    // 点击选项时更新选中的内容并关闭下拉框
    if(optionsElements) {
        selectedTextElement.textContent = defaultText
        optionsElements.forEach(option => {
            if (option.textContent.trim() === selectedTextElement.textContent.trim()) {
                curSelection = option;
                curSelection.classList.add('current');
                curSelection.classList.add('not-hover');
            }
    
            option.addEventListener('click', () => {
                selectedTextElement.textContent = option.textContent;  // 更新选中的内容
                if (curSelection) curSelection.classList.remove('current');  // 移除之前选中的样式
                curSelection = option;
                curSelection.classList.add('current');  // 添加当前选项的样式
    
                if(option.textContent.trim() === '输血科') {
                    radioElements.style.display = 'none';
                    dNElements.style.display = 'none';
                } else {
                    radioElements.style.display = 'inline-block';
                    dNElements.style.display = 'inline-block';
                }
                
                // 隐藏下拉框并重置箭头
                toggleDropdown(false);
            });
        });
    } else {
        const emptyDiv = document.createElement('div')
        emptyDiv.classList.add('empty')
        emptyDiv.textContent = '无数据'
        optionsContainer.appendChild(emptyDiv)

    }

    // 点击其他地方关闭下拉框
    window.addEventListener('click', (e) => {
        if (!e.target.closest(closestItem)) {  // 如果点击区域不在选择框内
            toggleDropdown(false);
        }
    });

    // 焦点事件，给选择框添加焦点样式
    selectElement.addEventListener('focus', () => selectElement.classList.add('focused'));
    selectElement.addEventListener('blur', () => selectElement.classList.remove('focused'));
}

// 创建选项
function createOptions(containerSelector, optionsData, classString) {
    
    const container = document.querySelector(containerSelector);
    const fragment = document.createDocumentFragment();
    // 清空
    container.innerHTML = "";

    optionsData.forEach(option => {
        // 创建外层 div
        const optionDiv = document.createElement('div');
        optionDiv.classList.add(`${classString}-option`);  // 根据需要改变 className
        optionDiv.setAttribute('data-value', option.pid);

        // 创建内层文本 div
        const textDiv = document.createElement('div');
        textDiv.classList.add(`${classString}-option-text`);  // 根据需要改变 className
        textDiv.textContent = option.name;

        optionDiv.appendChild(textDiv);
        fragment.appendChild(optionDiv);
    });

    container.appendChild(fragment);
}

function getRadioText() {
    let radioText = '';
    document.querySelectorAll('input[name="diagnosis"]').forEach(radio => {
        if (radio.checked) {
            radioText = radio.nextElementSibling.querySelector('span').innerText;
        }
    });
    return radioText;
}